<template>
  <basic-dialog
    :visible.sync="visible"
    :title="'提示'"
    :width="'80%'"
    :handleClose="handleCloseDialog"
    :handleOpen="handleOpenDialog"
    :showFooter="false"
  >
    <el-card shadow="never">
      <skus-table
        :showSelectCol="false"
        :dataSource="tableInfo.list"
        :columns="columns"
        :loading="tableInfo.loading"
        :tableHeight="450"
      >
        <el-row slot="content_context" type="flex" justify="space-between">
          <h3>下列商品在单据中的发货公司内未存在销售区域，需联系商品人员维护销售区域后，再尝试提交。</h3>
          <el-button
            type="primary"
            size="mini"
            :disabled="!tableInfo.list.length"
            :loading="exportLoading"
            @click="exportTemplate"
          >导出</el-button
          >
        </el-row>
      </skus-table>
    </el-card>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { createExcelByExport } from '@/utils/bizUtils';
import {
  exportSaleAreaListService,
} from '@/api/sourcing/public';

export default {
  name: 'SaleAreaTip', // 维护销售区域提示
  mixins: [skusPage],
  components: {
    BasicDialog,
    SkusTable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    skuList: {
      type: Array,
      required: true,
      default: () => {
        return []
      },
    },
  },
  data () {
    return {
      columns: [
        {
          key: 'index',
          title: '序号',
          render: (h, { index, row }) => {
            return <span>{ index + 1 }</span>
          }
        },
        {
          key: 'skuNo',
          title: '商品代码',
        },
        {
          key: 'skuName',
          title: '商品名称',
        },
        {
          key: 'categoryName',
          title: '四级品类',
        },
        {
          key: 'productBrand',
          title: '品牌',
        },
        {
          key: 'productSpec',
          title: '规格型号',
        },
      ]
    };
  },

  computed: {
    // 需求id
    skuIds () {
      return this.tableInfo.list.map(item => item.skuId)
    },
  },
  methods: {
    handleOpenDialog () {
      this.tableInfo.list = this.skuList;
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    // 导出信息数据
    async exportTemplate () {
      const res = await exportSaleAreaListService(this.skuIds, state => { this.exportLoading = state })
      if (res) {
        createExcelByExport({ res, excelTitle: '商品信息' });
      }
    },
  }
};
</script>
